<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.1s{
				margin: 50px auto;
			}

			.2s{
				font-size: 16px;
			}
		</style>
		<script>
			window.onload = function() {
				let btn = document.querySelector('button');
				let span = document.querySelector('span');
				let hour = 00;
				let minute = 00;
				let second = 00;
				let timer;

				btn.onclick = function() {
					let hh;
					let mm;
					let ss;
					if (btn.innerHTML == '开始计时') {
						timer = window.setInterval(function() {
							second++;
							if(second < 10)
							{
								ss = '0' + second;
							}
							
							
							if (second == 60) {
								
								minute++;

								second = 00;
							}

							if (minute == 60) {
								
								hour++;

								minute = 00;
							}
							
							if(minute < 10)
							{
								mm = '0' + minute;
							}
							
							if(hour < 10)
							{
								hh = '0' + hour;
							}
							
							span.innerHTML = `${hh} : ${mm} : ${ss}`;
						}, 100);
						btn.innerHTML = '暂停';
					} else {
						clearInterval(timer);
						btn.innerHTML = '开始计时'
					}
				}
			}
		</script>
	</head>
	<body>
		<div class="1s">
			<button>开始计时</button>
		</div>

		<div class="2s">
			<span></span>
		</div>

	</body>
</html>